<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <van-list
        class="job-fair-list"
        v-model="loading"
        :finished="true"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="job-fair-item"
          v-for="(item, index) in list"
          :key="index"
          @click="onItemClick(item)"
        >
          <p class="time">
            <b>{{ item.zpDateWeek }}</b>
            <span>{{ item.zpDateMonth }}.{{ item.zpDateDay }}</span>
          </p>
          <p class="info">
            <b>{{ item.title }}</b>
            <span><van-icon name="clock-o" />{{ item.zpDate }}</span>
            <span><van-icon name="location-o" />{{ item.addr }}</span>
          </p>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { List, Icon } from "vant";
import { GetXCZPHList } from "@/util/http";
export default {
  name: "ZPHList",
  components: {
    NavBar,
    [List.name]: List,
    [Icon.name]: Icon,
  },
  props: ["title"],
  // 定义属性
  data() {
    return {
      loading: true,
      list: [],
    };
  },
  mounted() {
    this.onLoad();
  },
  // 方法集合
  methods: {
    onLoad() {
      this.loading = true;
      GetXCZPHList().then((res) => {
        this.loading = false;
        this.list = res;
      });
    },
    onItemClick(item) {
      this.$router.push({
        name: "person-xczph-info",
        query: { id: item.xczpID },
        params: { zphData: item },
      });
    },
  },
};
</script>

<style scoped>
.job-fair-list {
  display: flex;
  flex-direction: column;
  padding: 10px 15px 0;
}

.job-fair-list .job-fair-item {
  display: flex;
  padding: 15px;
  border-radius: 10px;
  background-color: #fff;
}

.job-fair-list .job-fair-item + .job-fair-item {
  margin-top: 10px;
}

.job-fair-list .job-fair-item .time {
  display: flex;
  flex: 0 0 60px;
  flex-direction: column;
  margin-right: 15px;
  text-align: center;
  overflow: hidden;
}

.job-fair-list .job-fair-item .time b {
  padding: 2px 0;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(#f70, #f90);
  font-size: 13px;
  color: #fff;
}

.job-fair-list .job-fair-item .time span {
  padding: 4px 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(#f2f2f2, #ebebeb);
  font-size: 18px;
  font-weight: 500;
  color: #666;
}

.job-fair-list .job-fair-item .info {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}

.job-fair-list .job-fair-item .info b {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.job-fair-list .job-fair-item .info span {
  font-size: 13px;
  color: #666;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.job-fair-list .job-fair-item .info span i {
  margin-right: 4px;
  color: #aaa;
}
</style>
